<template>
	<div>
		{{ abc }}
		<button @click="$emit('getChange', msg)">触发更新</button>
		<h1>{{ num }}</h1>
	</div>
</template>

<script>
export default {
	props: ['abc'],
	data() {
		return {
			num: 1,
			// 定时器对象
			myTime: null,
			msg: '我要被更新了，updated生命周期会被执行',
		}
	},
	// 创建
	beforeCreate() {
		console.log('1.创建前')
	},
	created() {
		console.log('2.创建后')
	},
	// 挂载
	beforeMount() {
		// 骨架屏--技术
		console.log('3.挂载前')
	},
	// 当页面加载完成，发起一个请求，写这里。
	mounted() {
		// 挂载成功相当于window.onload
		// 请求--单次请求--轮询请求
		this.myTime = setInterval(() => {
			this.num++
			console.log('成功！')
		}, 1000)
		console.log('4.挂载成功')
	},
	// 更新：当data或props数据修改时触发
	beforeUpdate() {
		console.log('更新前')
	},
	updated() {
		console.log('更新后')
	},
	// 卸载-销毁
	beforeDestroy() {
		console.log('卸载前')
		window.clearInterval(this.myTime)
	},
	destroyed() {
		console.log('卸载完成')
	},
}
</script>